<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS章节 第一课 的第一个文件</title>
	</head>

	<body>
		<h1 align="center">什么是DIV，什么是CSS？</h1>
		<hr>
		<p>
			DIV：可定义文档中的分区或节点<br>
			CSS：是层叠样式表，定义如何显示页面中的元素
		</p>
		<p>如何定义？</p>
		<p>CSS的语法？</p>
		
		<section>
			CSS样式的种类：
			<ol>
				<li>
					内部样式表
					<ul>
						<li>
							内联样式：标签style属性定义的样式<br>
							优先级：最高！
						</li>
						<li>
							嵌入样式：&lt;style&gt;&lt;/style&gt;标签中的样式<br>
							优先级：后面覆盖前面的！越靠前的越容易被覆盖！
						</li>
					</ul>
				</li>
				<li>
					外部样式表：link标签引入的样式<br>
					优先级：后面覆盖前面的！越靠前的越容易被覆盖！
				</li>
			</ol>
		</section>

		<pre>
body#homesecond dt
{
	font-weight: bold;
	font-size: 14px;
	margin:0;
	padding:0;
}
		</pre>

		<p>演示：</p>

<!-- 
		<div style="background: #0ff;width:200px; height: 200px;text-align: center;line-height: 200px;margin: 10px auto;color: #ff0;">
			我是一个DIV
		</div>
		<div style="background: #f0f;width:200px; height: 200px;text-align: center;line-height: 200px;margin: 10px auto;color: #0f0;">
			我是DIV2
		</div>
		<div style="background: #ff0;width:200px; height: 200px;text-align: center;line-height: 200px;margin: 10px auto;color: #0ff;">
			我是DIV3
		</div>
 -->

		<div class="div1" style="background: #000;">
			我是一个DIV
		</div>
		<div class="div2">
			我是DIV2
		</div>
		<div class="div3">
			我是DIV3
		</div>

		<link rel="stylesheet" href="./1.css">

		<style>
		div {
			background: #0f0;
		}
		</style>

	</body>
</html>